<template>
  <div class="visitor">
    <div class="top">
      <div class="left">
        <span class="free">{{ user.isInsure === 0 ? "自费" : "医保" }}</span>
        <span class="username">{{ user.name }}</span>
      </div>
      <div></div>
      <div class="right">
        <el-button
          :icon="Edit"
          size="default"
          type="primary"
          @click="handler"
        ></el-button>
        <el-popconfirm
          :title="`是否删除[` + user.name + `]就诊人?`"
          @confirm="delUser(user.id)"
        >
          <template #reference>
            <el-button
              v-if="route.path === '/user/patient'"
              :icon="Delete"
              size="default"
              type="danger"
            ></el-button>
          </template>
        </el-popconfirm>
      </div>
    </div>
    <div class="bottom">
      <p>证件类型：{{ user.param.certificatesTypeString }}</p>
      <p>证件号码：{{ user.certificatesNo }}</p>
      <p>用户性别：{{ user.sex === 0 ? "女士" : "男生" }}</p>
      <p>出生日期：{{ user.birthdate }}</p>
      <p>手机号码：{{ user.phone }}</p>
      <p>婚姻状况：{{ user.isMarry === 0 ? "未婚" : "已婚" }}</p>
      <p>当前地址：{{ user.param.cityString }}</p>
      <p>详细地址：{{ user.param.fullAddress }}</p>
      <!--  已选择    -->
      <transition name="confirm"
        ><div v-if="currentIndex === index" class="confirm">
          已选择
        </div></transition
      >
    </div>
  </div>
</template>
<script lang="ts" name="Visitor" setup>
import { Edit, Delete } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import router from "@/router";
import { doDelUser } from "@/api/user.ts";
let props = defineProps(["user", "index", "currentIndex", "del"]);
let route = useRoute();

let $emit = defineEmits(["changeScene", "removeUser"]);

const handler = () => {
  if (route.path === "/user/patient") {
    $emit("changeScene", props.user);
  } else {
    router.push({
      path: "/user/patient",
      query: {
        type: "edit",
        id: props.user.id,
      },
    });
  }
};
// 删除就诊人
const delUser = async (id: number) => {
  await doDelUser(id);
  $emit("removeUser");
};
</script>

<style lang="scss" scoped>
.visitor {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);

  .top {
    height: 60px;
    background-color: #e5e5e5;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .left {
      color: #7f7f7f;

      .free {
        background: white;
        padding: 2px;
        font-size: 12px;
        // 圆角
        border-radius: 3px;
      }

      .username {
        margin-left: 10px;
      }
    }
  }

  .bottom {
    color: #7f7f7f;
    height: 350px;
    padding-top: 10px;
    p {
      padding-left: 25px;
      line-height: 40px;
    }
    position: relative;
    .confirm {
      position: absolute;
      width: 200px;
      height: 200px;
      color: red;
      border-radius: 50%;
      border: 1px dashed red;
      text-align: center;
      line-height: 200px;
      left: 20%;
      top: 20%;
      opacity: 0.5;
      transform: rotate(45deg);
      font-size: 20px;
      font-weight: 900;
    }
    .confirm-enter-from {
      transform: scale(1);
    }
    .confirm-enter-active {
      transition: all 0.3s ease;
    }
    .confirm-enter-to {
      transform: scale(1.2);
    }
  }
}
</style>
